web开发

ReactNative初体验

  笙磬

亲戚称谓计算器

这是一款很简单的RN应用，主要是体验下如何使用RN去开发一个NativeApp的过程，除此以外，我尝试使用的Redux作为这个应用的数据流管理。

源代码：https://github.com/lishengzxc/RnRelative

apk：http://lishengzxc.github.io/RnRelative/app-release.apk 暂无iOS版本

应用预览

preview

环境搭建

这里主要说Andorid环境的搭建，具体细节，参考RN的官方文档，我这里主要说下，我遇到的问题和关键步骤

如何打开模拟器等简单问题：https://facebook.github.io/react-native/docs/getting-started.html

  • 用brew安装watchman和flow
  • brew安装android-sdk管理器和ndk(ndk用来启动官方demo)
  • 配置android环境变量
  • 安装以下sdk
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Android Support Repository
  • 我开发使用的是sdk自带的模拟器，需要安装并配置HAXM来加速模拟器，不然会很卡
    • 通过android-sdk下载Intel x86 Emulator Accelerator (HAXM installer)
    • 安装HAXM如果你是通过brew来安装的android-sdk，那这个安装文件在这里 /usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager, 里面有个.dmg，安装它，这样你就获得了一个很流畅的模拟器了

开始使用ReactNative

1
2
$ tnpm install -g react-native-cli
$ react-native init RnRelative

运行Android应用

1
2
$ cd AwesomeProject
$ react-native run-android

使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按fn+f2然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行

1
adb logcat *:S ReactNative:V ReactNativeJS:V

可以看到你的应用的日志。

运行官方demo(确认已经安装好ndk)

1
2
3
git clone https://github.com/facebook/react-native  

./gradlew :Examples:UIExplorer:android:app:installDebug

在这个demo，你可以看见ReactNative提供的所有控件该如何调用，我自己写的东西并没有用到太多的控件，但是和日常web开发对比，有一下体会：

  • <div>在RN里对应的是<View />
  • 没有原生的<button />，只有<TouchableHighlight />

关于Redux

一直想体验下Redux，所以打算在这个RN里去体验，Redux更加强调函数式编程，具体介绍请查看官网：
https://github.com/rackt/redux

我自己做了一个ReactJS和Redux的todo：https://github.com/lishengzxc/ReactReduxTodo

如果你再稍微看下RnRelative里面使用Redux的代码，我想会有更加深刻的理解

注意一点

Until React Native works on top of React instead of shipping a fork of React, you’ll need to keep using React Redux 3.x branch and documentation.
在我写这个RN应用的时候为止。

页面布局

RN使用阉割版的flexbox布局，css的属性支持的也不完全
https://facebook.github.io/react-native/docs/flexbox.html#content

结语

亲戚称谓计算器我觉得只是另一种Todo，很多的原生能力也没有用到，网络api也没有用到，但是通过完成这么一个应用，起码对RN有了进一步理解。

Powered By http://12d.alibaba.net/

分享到